<template>
    <div class="myList">
        <div class="con" @click="toteacherDetail(itemObj.teacher_id)">
            <img :src="itemObj.teacher_avatar" alt="">
            <div class="text">
                <p>{{itemObj.teacher_name}}</p>
                <span>{{itemObj.introduction}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        itemObj: {
            type: Object
        }
    },
    data() {
        return {

        }
    },
    created() {

    },
    methods: {
        toteacherDetail(id) {
            this.$router.push({ name: 'teacherDetail', query: { "id": id } })
        }
    }
}
</script>
<style lang="scss" scoped>
.myList {
    margin: 5px 0;

    .con {
        background-color: #fff;
        display: flex;
        align-items: center;
        padding-left: 30px;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .text {
            margin-left: 10px;
            padding: 20px 10px;

            p {
                font-size: 16px
            }

            span {
                font-size: 12px;
                color: #a6a9ab;
            }
        }
    }
}
</style>


